<!-- 券使用 -->
<template>
  <div class="container">
    <scroll-view :scroll-y="true" style="height: 100%">
      <div class="box">
        <div class="box-list">
          <div>
            <img :src="imgUrl+dataList.image" v-if="imgUrl&&dataList.image" alt class="img-box" />
          </div>
          <div class="text-box">
            <div class="col-333">{{dataList.project_name}}</div>
            <div class="col-999">{{dataList.hospital_name}}</div>
            <div class="font-12">
              <span>￥</span>
              <span class="font-18">{{dataList.origin_price}}</span>
            </div>
          </div>
        </div>
        <div class="choose">
          <div class="df mb-22">
            <div class="font-14">选择医院</div>
            <div class="hospital" @click="chooseHospital">
              <input type="text" v-model="inputVal" class="input-999" disabled placeholder="请选择医院" />
              <div>
                <img
                  class="arrowrt1"
                  :src="ImgBaseUrl+'/jifenshangcheng/xiangqingye/xiayibu@2x.png'"
                  v-if="ImgBaseUrl"
                  alt
                />
              </div>
            </div>
          </div>
          <div class="df">
            <div class="font-14">预约时间</div>
            <picker
              class="picker"
              mode="date"
              :value="appointment_time"
              :start="startdate"
              :end="enddate"
              @change="bindDateChange"
            >
              <span>{{appointment_time}}</span>
              <img
                class="arrowrt"
                :src="ImgBaseUrl+'/jifenshangcheng/xiangqingye/xiayibu@2x.png'"
                v-if="ImgBaseUrl"
                alt
              />
            </picker>
          </div>
        </div>
      </div>
      <div class="adult">
        <img :src="ImgBaseUrl+'/mp_3.1.6/提示图标/安卓/hdpi/提示.png'" v-if="ImgBaseUrl" alt class="icon" />
        预约成功后，客服会在您预约的前一天联系您
      </div>
      <div class="footer">
        <div class="btn" @click="submitTicket">提交预约</div>
      </div>
    </scroll-view>
    <!-- 选择医院弹窗 -->
    <div class="mask" v-if="isShow" @click="close">
      <div class="hospital-list" @click.stop>
        <div class="province">
          <div
            class="province-item"
            v-for="(item,index) in hospitalList"
            :key="index"
            :class="current==index?'active':''"
            @click="current = index"
          >{{item.province_name}}</div>
        </div>
        <div class="rt" v-if="hospitalList.length">
          <div
            class="item"
            v-for="(item,index) in hospitalList[current].data"
            :key="index"
            @click="screenHospital(item)"
          >
            <!--v-if="imgUrl&&item.hospital_image"  :class="imgUrl+item.hospital_image?'':'mr'"   -->
            <img
              :src="imgUrl+item.hospital_image"
              :class="imgUrl+item.hospital_image?'':'mr'"
              class="img-item"
              alt
            />
            <div class="wid">{{item.hospital}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import imageurl from "@/assets/js/image.js";
export default {
  data() {
    return {
      startdate: "", //有效日期范围的开始
      enddate: "", //有效日期范围的结束
      project_id: "",
      ticket_id: "",
      type: 3, //1 app 3 主小程序预约
      appointment_time: "请选择预约时间",
      wechat: "",
      ImgBaseUrl: common.image_resource,
      dataList: {},
      imgUrl: common.image_response, //http图片
      isShow: false,
      current: 0, //当前选中的省份
      hospitalList: [],
      inputVal: ""
    };
  },

  components: {},

  onLoad(options) {
    wx.setNavigationBarTitle({ title: "确认预约" });
    wx.setNavigationBarColor({
      frontColor: "#1D2023", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#3EB0A9", //背景颜色值，有效值为十六进制颜色,
      success: res => {}
    });
    this.startdate = new Date().Format("yyyy-MM-dd");
    console.log("options", options);
    if (options.ticket_id) {
      this.ticket_id = options.ticket_id;
    }
    if (options.project_id) {
      this.project_id = options.project_id;
    }
    // this.getDetail();
    this.dataList = {};
    this.appointment_time = "请选择预约时间";
    this.inputVal = "";
  },
  methods: {
    // 获取选择时间
    bindDateChange(e) {
      this.appointment_time = e.target.value;
    },
    // 获取列表详情
    getDetail() {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/c2c/appoint_detail",
        {
          project_id: this.project_id,
          ticket_id: this.ticket_id
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.dataList = res.data;
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // current(val) {
    // },
    // 打开医院弹窗
    chooseHospital() {
      this.isShow = true;
      common.mmk_Loading(0);
      common.fly_post(
        "api/act/activity/serchInfo",
        { ticket_id: this.ticket_id },
        response => {
          common.mmk_Loading(1);
          const res = response.data;
          if (res.status_code == 0) {
            this.hospitalList = res.data;
            // this.hospitalList.forEach((item, index) => {
            //   if (this.current == index) {
            //     this.hospitalArr = item.data;
            //   }
            //   console.log("hospitalArr", JSON.stringify(this.hospitalArr));
            // });
            // console.log("hospitalList", this.hospitalList[1].data[0].hospital);
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 选择医院
    screenHospital(val) {
      this.inputVal = val.hospital;
      this.isShow = false;
      this.current = 0;
    },
    // 关闭弹窗
    close() {
      this.isShow = false;
      this.current = 0;
    },
    // 提交预约
    submitTicket() {
      if (
        this.appointment_time &&
        this.appointment_time != "请选择预约时间" &&
        this.inputVal
      ) {
        common.mmk_Loading(0);
        common.fly_post(
          "api/v4_5/c2c/appoint_submit",
          {
            project_id: this.project_id,
            ticket_id: this.ticket_id,
            appointment_time: this.appointment_time,
            type: 3, //主小程序
            wechat: ""
          },
          response => {
            common.mmk_Loading(1);
            let res = response.data;
            console.log("res", res);
            if (res.status_code == 0) {
              common.mmk_Loading(2, "提交成功");
              wx.navigateTo({
                url:
                  "/pages/ct_store/submit_ticket/main?appoint_id=" +
                  res.appoint_id
              });
            } else {
              common.mmk_Loading(2, res.message);
            }
          }
        );
      } else {
        common.mmk_Loading(2, "请选择医院和预约时间");
      }
    }
  },

  onShow() {
    this.getDetail();
  }
};
</script>

<style lang="less" scoped>
.rtfont {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999;
  line-height: 20px;
}
.arrowrt1 {
  width: 17px;
  height: 17px;
}
.container {
  width: 100%;
  height: 100%;
  background: #f7f8fa;
  box-sizing: border-box;
  .box {
    width: 355px;
    padding-top: 10px;
    margin: 0 auto;
    .box-list {
      width: 100%;
      height: 138px;
      border-radius: 5px;
      background: #fff;
      padding: 12px 10px;
      display: flex;
      justify-content: center;
      margin-bottom: 10px;
      box-sizing: border-box;
      .img-box {
        width: 114px;
        height: 114px;
        border-radius: 6px;
        margin-right: 10px;
      }
      .text-box {
        width: 211px;
        font-size: 12px;
        .col-333 {
          width: 100%;
          height: 40px;
          color: #333;
          font-size: 14px;
          font-family: "font-family:PingFangSC-Regular,PingFang SC;";
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-bottom: 6px;
        }
        .col-999 {
          color: #999;
          line-height: 16px;
          margin-bottom: 32px;
        }
        .font-12 {
          color: #ff383e;
          line-height: 16px;

          .font-18 {
            font-size: 18px;
            font-family: "PingFangSC-Medium,PingFang SC";
            font-weight: 500;
            line-height: 20px;
          }
        }
      }
    }
    .choose {
      width: 100%;
      height: 86px;
      padding: 12px 10px;
      background: #fff;
      margin: 0 auto;
      border-radius: 5px;
      box-sizing: border-box;
      .df {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        &.mb-22 {
          margin-bottom: 22px;
        }
        .font-14 {
          width: 56px;
          font-size: 14px;
          color: #333;
          margin-right: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
        }
        .hospital {
          // position: absolute;
          // left: 66px;
          width: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // z-index: -1;
          .input-999 {
            color: #999;
            font-size: 14px;
          }
        }
        .picker {
          width: 80%;
          flex: 1;
          .rtfont;
          position: relative;
          .arrowrt {
            width: 17px;
            height: 17px;
            position: absolute;
            right: 0;
            top: -2px;
          }
        }
      }
    }
  }
  .adult {
    position: fixed;
    left: 59px;
    right: 59px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    bottom: 95px;
    font-size: 12px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: rgba(245, 157, 97, 1);
    line-height: 12px;
    text-align: center;
    .icon {
      width: 12px;
      height: 12px;
      margin-right: 3px;
      display: inline-block;
      vertical-align: bottom;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 83px;
    background: #fff;
    box-shadow: 0px -2px 5px 0px rgba(229, 229, 229, 0.48);
    display: flex;
    justify-content: flex-end;
    padding: 5px 10px 40px 259px;
    box-sizing: border-box;
    .btn {
      width: 106px;
      height: 38px;
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
      border-radius: 100px;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 38px;
    }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    // opacity: 0.7;
    z-index: 1000;
    .hospital-list {
      width: 100%;
      height: 285px;
      overflow: hidden;
      background: #f3f4f6;
      display: flex;
      z-index: 1001;
      .province {
        width: 74px;
        height: 285px;
        overflow-y: scroll;
        margin-right: 24px;
        .province-item {
          // width: 100%;
          max-width: 74px;
          height: 44px;
          line-height: 44px;
          padding: 0 16px;
          overflow: hidden;
          text-align: center;
          font-size: 14px;
          color: #1d2023;
          font-family: "PingFangSC-Regular, PingFang SC";
          box-sizing: border-box;
          &.active {
            background: #fff;
          }
        }
      }
      .rt {
        width: 275px;
        height: 285px;
        overflow-y: scroll;
        padding: 13px 12px 18px 0;
        box-sizing: border-box;
        .item {
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #333;
          font-family: "PingFangSC-Medium, PingFang SC";
          font-weight: 500;
          margin-bottom: 18px;
          .img-item {
            flex: 1;
            min-width: 50px;
            max-width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
            // border: 1px solid red;
          }
          .mr {
            margin-right: 60px;
          }
          .wid {
            width: 205px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>